<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./js/jquery.js" type="text/javascript"></script>
	<body>
		<video id="mainVideo" autoplay></video>
		<button id="btn">click</button>
		<div id="consoleArea" style="font-size: 50px;"></div>
	</body>
	<script type="text/javascript">
		$("#document").ready(()=>{
			console.log($("#mainVideo")[0])
			$("#consoleArea")[0].append("start ...")
			function getLocalUserMedia(constrains) {
			  try{
				  $("#consoleArea")[0].append("start getUserMedia")
				  if (window.navigator.mediaDevices.getUserMedia) {
					$("#consoleArea")[0].append("<br/> <a>getUserMedia</a>")
				    return window.navigator.mediaDevices.getUserMedia(constrains);
				  } else 
				  if (window.navigator.webkitGetUserMedia) {
					  $("#consoleArea")[0].append("                  webkitGetUserMedia")
				    return window.navigator.webkitGetUserMedia(constrains);
				  } else if (window.navigator.mozGetUserMedia) {
					  $("#consoleArea")[0].append("                  mozGetUserMedia")
				    return window.navigator.mozGetUserMedia(constrains);
				  } else if (window.navigator.getUserMedia) {
				    return window.navigator.getUserMedia(constrains);
				  }
				  $("#consoleArea")[0].append("ok")
			  }
			  catch(e){
				  $("#consoleArea")[0].append(e)
			  }
			  throw new Error("unable to get user media");
			}
			const getProUserMedia=(constrains)=>{
				$("#consoleArea")[0].append("<br/>test get2")
				// return new Promise((resolve,reject)=>{
				// 	$("#consoleArea")[0].append("<br/>test get3")
				// 	if (window.navigator.mediaDevices.getUserMedia) {
				// 		$("#consoleArea")[0].append("<br/>test get4")
						
				// 	   try{
				// 		   $("#consoleArea")[0].append(window.navigator.mediaDevices.getUserMedia)
				// 		   // resolve(window.navigator.mediaDevices.getUserMedia(constrains));
						   
				// 	   }
				// 	   catch(e){
				// 		   $("#consoleArea")[0].append("error")
				// 	   }
				// 	}else{
				// 		$("#consoleArea")[0].append("error")
				// 		throw new Error("unable to get user media");
				// 		reject(null);
				// 	}
				// })
			}
			$("#btn").click(()=>{
				$("#consoleArea")[0].append("<br/>test get1")
				// getLocalUserMedia({audio: true, video: true}).then(userMedia => {
				// 	console.log(userMedia)
				// 	$("#consoleArea")[0].append("<br/>test get")
				// 	$("#consoleArea")[0].append("<br/>getUserMedia success")
				//     $("#mainVideo")[0].srcObject = userMedia;
					
				// 	console.log($("#mainVideo")[0].srcObject)
				// })
				getProUserMedia({audio: true, video: true}).then((userMedia)=>{
					$("#consoleArea")[0].append("<br/>getUserMedia success")
					$("#mainVideo")[0].srcObject = userMedia;
					console.log($("#mainVideo")[0].srcObject)
				})
			})
			// const show=()=>{
				
			// }
		})
	</script>
	<style scoped>
		#mainVideo{
			width: 500px;
			height: 500px;
		}
	</style>
</html>